<template>
  <div class="height100 libaryClassList" v-loading="loading">
    <!--title begin-->
    <!--<el-button type="primary" @click="demo01">主要按钮</el-button>-->
    <!--<el-button type="primary" @click="demo02">主要按钮</el-button>-->
    <div slot="header" class="clearfix tree-title">
      <span class="span-title">文库分类管理</span>
      <div style="float: right">
        <el-button class="size" size="small" @click="pappend()" title="添加根菜单" icon="el-icon-plus" circle></el-button>
        <div class="clearfix"></div>
      </div>
    </div>
    <!--title end-->
    <!--tree begin-->
    <div class="tree-detail">
      <div class="block">
        <!--
          node-key - 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
          expand-on-click-node - 是否在点击节点的时候展开或者收缩节点，
                                 默认值为 true，如果为 false，则只有点箭
                                 头图标的时候才会展开或者收缩节点
          default-expand-all - 是否默认展开所有节点
        -->
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-expand="expand"
          @node-collapse="collapse"
          :default-expanded-keys="expandedKeys"
          node-key="id"
          :expand-on-click-node="false"
          :default-expand-all="true">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.name }}</span>
            <span>
              <el-button
                type="primary"
                class="size"
                size="small"
                @click="check(data)" icon="el-icon-view" circle>
              </el-button>
              <el-button
                class="size"
                size="small"
                @click="append(data)" icon="el-icon-plus" circle>
              </el-button>
              <el-button
                v-if="data.children.length == 0"
                class="size"
                type="danger"
                size="small"
                @click="remove(data)" icon="el-icon-delete" circle>
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <!--tree end-->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false, // 设置loading加载动画
        treeData: [], // 树形图数据
        defaultProps: { // 配置选项
          children: 'children',
          label: 'title'
        },
        expandedKeys: [], // 默认展开的节点的 key 的数组
        MenuTree: {} // 树形结构菜单信息查询接口传参
      }
    },
    created() {
      this.fetchData()
    },
    watch: {
    },
    methods: {
      demo01() {
        this.$router.push({
          name: 'demo01'
        })
      },
      demo02() {
        this.$router.push({
          name: 'demo02'
        })
      },
      fetchData() { // 调用接口 function
        this.$store.dispatch('TreeQuery', this.MenuTree).then(res => {
          console.log('树形结构菜单信息返回 - ', res)
        }).catch((err) => {
          console.log(err)
        })
      },
      pappend() { // 添加菜单 function

      },
      expand(data) { // 节点被展开时触发的事件

      },
      collapse() { // 节点被关闭时触发的事件

      }
    }
  }
</script>
<style scoped>
  .libaryClassList{
    border-right: 1px solid#ccc;
  }
  .tree-title{
    box-sizing: border-box;
    font-size: 16px;
    padding:10px 10px 10px 20px;
    border-bottom: 1px solid #ccc;
  }
  .span-title{
    float: left;
    line-height: 16px;
    border-left:4px solid #000;
    padding-left: 10px;
    font-size: 16px;
    margin-top: 7px;
  }
  .size{
    padding:6px;
  }
</style>
